<template>


    <div>


        <el-card shadow="always" style="text-align: center;margin-bottom: 30px">
            首页轮播图设置
        </el-card>

        <el-carousel :interval="4000" type="card" height="200px" style="margin-top: 10px">
            <el-carousel-item v-for="item in fileList" :key="item.name">
                <img :src="item.url" style="height:100%;width:100%;">
            </el-carousel-item>
        </el-carousel>
        <div style="text-align: center;font-size: 1px;font-family: 'Microsoft YaHei UI Light'">当前首页展示图片</div>


        <div style="margin: 15px">

            <el-upload
                    class="upload-demo"
                    drag
                    ref="upload"
                    action="/api/uploadfile"
                    :auto-upload="false"
                    :data="addForm"
                    multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>

            <el-upload
                    class="upload-demo2"
                    action="/uploadfile"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :file-list="fileList"
                    list-type="picture">
            </el-upload>
            <el-tooltip class="item" effect="dark" content="点击上传" placement="top-start">
                <el-button class="upload-demo3" type="primary" icon="el-icon-edit" circle @click="addshang"></el-button>
            </el-tooltip>

        </div>

        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%">
            <span>
                <el-select v-model="value" placeholder="请选择">
    <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
    </el-option>
  </el-select>
            </span>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addSure">确 定</el-button>
  </span>
        </el-dialog>

    </div>


</template>

<script>
    export default {
        name: "AddRotationMap",
        data() {
            return {
                dialogVisible: false,
                fileList: [
                    {
                        name: '1',
                        url: '/api/getImg?keyname=imageFirest'
                    },
                    {
                        name: '2.jpeg',
                        url: '/api/getImg?keyname=imageSecond'
                    },
                    {
                        name: '3.jpeg',
                        url: '/api/getImg?keyname=imageThird'
                    }
                    ,
                    {
                        name: '4.jpeg',
                        url: '/api/getImg?keyname=imageFour'
                    }
                    ,
                    {
                        name: '5.jpeg',
                        url: '/api/getImg?keyname=imageFive'
                    }

                ],
                addForm:{
                    keyname:''
                },
                options: [{
                    value: 'imageFive',
                    label: '第一张轮播图'
                }, {
                    value: 'imageFour',
                    label: '第二张轮播图'
                }, {
                    value: 'imageSecond',
                    label: '第三张轮播图'
                }, {
                    value: 'imageThird',
                    label: '第四张轮播图'
                }, {
                    value: 'imgFirst',
                    label: '第五张轮播图'
                }],
                value: ''
            };
        },
        mounted(){
            this.init();
            this.loading=true
            setTimeout(() => {
                // 方法区
                this.loading=false
            }, 1000);
        },
        methods: {
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            addshang(){
                console.log(1);
                this.dialogVisible=true;
            },
            addSure(){
                this.dialogVisible=false;
                console.log(this.value);
                this.addForm.keyname=this.value;
                this.$refs.upload.submit();
                // window.location.reload();
            },
            init(){

            }
        }
    }
</script>

<style scoped>
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }

    .upload-demo {
        position: fixed;
        bottom: 20%;
        margin-top: 15px;
        text-align: center;

    }

    .upload-demo2 {
        position: absolute;
        width: 400px;
        right: 10%;
    }
    .upload-demo3{
        position: fixed;
        margin-top: 175px;
        margin-left: 22%;
    }
</style>
